<template>
  <div class="page-content">
    <div class="content-bar">
      <div class="bar-title">
        <img
          class="title-icon"
          src="@/assets/images/icon/music163.png"
        />
        <span class="title-name">网抑云热评</span>
      </div>
      <div class="bar-list">
        <ul class="bar-ul">
          <li
            class="bar-li"
            v-for="(item,index) in list"
            :key="index"
          >
            <a
              title="点击查看详情"
              class="li-content"
            >
              <div
                class="song"
                :style="{'backgroundImage': 'url('+ item.simpleResourceInfo.songCoverUrl + ')'}"
              >
              </div>
              <div class="li-main">
                <div class="user">
                  <img
                    class="avatar"
                    :src="item.simpleUserInfo.avatar"
                  />
                  <span class="nick">{{item.simpleUserInfo.nickname}}</span>
                </div>

              </div>
              <div class="li-info">
                <img
                  class="before-img"
                  src="@/assets/images/icon/top-y.png"
                />
                <div class="data">{{item.content}}</div>
                <div class="after">
                  <span>{{item.simpleResourceInfo.artists[0].name}}</span>
                  <i>-</i>
                  <span>{{item.simpleResourceInfo.name}}</span>
                </div>
              </div>
            </a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import commentData from '@/api/data/music163'

export default {
  data () {
    return {
      list: []
    }
  },
  created () {
    this.initData()
  },
  methods: {
    initData () {
      this.list = commentData.data
    }
  }
}
</script>

<style lang="less" scoped>
.page-content {
  flex: 1 1 auto;
  display: flex;
  position: relative;
  overflow: hidden;
  width: 1200px;
  margin: 20px auto;
  .content-bar {
    position: relative;
    display: flex;
    flex-direction: column;
    cursor: default;
    user-select: none;
    width: 100%;
    flex: 0 0 auto;
  }
  .bar-title {
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    background-color: #fff;
    border-radius: 2px;
    min-height: 42px;
    z-index: 250;
    margin-right: 5px;
    .title-icon {
      width: 20px;
      height: 20px;
      margin-left: 10px;
    }
    .title-name {
      color: rgb(4, 74, 171);
      margin-left: 10px;
    }
    .title-search {
      width: 200px;
    }
  }
  .bar-list {
    flex: 1 1 auto;
    position: relative;
    overflow-y: scroll;
    padding-right: 3px;
    .bar-ul {
      transform: translate(0px, 0px) translateZ(0px);
      position: relative;
      padding-bottom: 10px;
      margin: 0;
      padding: 0;
      list-style: none;
      display: flex;
      flex-wrap: wrap;
      .bar-li {
        display: flex;
        flex-direction: column;
        cursor: pointer;
        position: relative;
        margin: 0 10px 10px 0;
        width: calc((100% - 20px * 1) / 3);
        min-height: 500px;
        &:nth-child(3n + 3) {
          margin-right: 0;
        }
        a.li-content {
          flex: 1 1 auto;
          display: flex;
          flex-direction: column;
          padding: 5px;
          // background-color: #fff;
          background: linear-gradient(to top,#7D3126 ,#15090B);
          border-radius: 2px;
          position: relative;
          .song {
            height: 200px;
            width: 100%;
            background-position: center;
            opacity: 0.75;
          }
          .li-main {
            padding: 10px 20px;
            position: absolute;
            top: 170px;
            .user {
              display: flex;
              align-items: center;
              .avatar {
                width: 50px;
                height: 50px;
                padding: 3px;
                background: #ebebeb;
                border-radius: 50%;
              }
              .nick {
                margin-left: 10px;
                margin-top: 25px;
                color: #adafb3;
              }
            }
          }
          .li-info {
            flex: 1 1 auto;
            padding: 40px 20px 20px 20px;
            display: flex;
            flex-direction: column;
            .before-img {
              width: 30px;
              height: 30px;
              padding: 3px;
            }
            .data {
              color: rgb(150, 149, 149);
              font-size: 18px;
              line-height: 30px;
            }
            .after {
              text-align: right;
              margin-top: 20px;
              color: #fff;
              padding: 0 10px;
              font-style: italic;
              i {
                padding: 0 5px;
                color: rgb(224, 224, 224);
              }
            }
          }
        }
        &:hover {
          a.li-content {
          }
        }
      }
    }
  }
}
</style>
